<script>
import { getProList } from '@/api/pro'
export default {
  data() {
    return {
      proList: [],
      //收集商品数据的对象
      formData: {
        count: '',
        limitNum: ''
      },
      currentPage: 1
    }
  },
  mounted() {
    getProList(this.formData).then(res => {
      // console.log(res)
      this.proList = res.data
    })
  },
  computed: {
    // 根据当前页码获取到当前页的数据
    computedTableData() {
      return this.proList.slice((this.currentPage - 1) * 10, (this.currentPage - 1) * 10 + 10)
    }
  }
}
</script>
<template>
  <div class="container">
    <el-table :data="computedTableData">
      <el-table-column type="index" :index="(currentPage - 1) * 10 + 1" label="序号" width="60px" align="center"></el-table-column>
      <el-table-column prop="proname" label="商品名称" width="200px" align="center" />
      <el-table-column prop="category" label="商品类型" align="center" />
      <el-table-column prop="brand" label="商品品牌" align="center" />
      <el-table-column prop="originprice" label="商品原价" align="center" />
      <el-table-column prop="discount" label="商品折扣" align="center" />
      <el-table-column prop="sales" label="商品现价" align="center" />
      <el-table-column prop="stock" label="商品库存" align="center" />
      <br>
      <el-table-column label="商品图片1" width="200px" align="center">
        <template #default="scope">
          <el-image :src="scope.row.img1"></el-image>
        </template>
      </el-table-column>>
      <el-table-column label="商品图片2" align="center" width="200px">
        <template #default="scope">
          <el-image :src="scope.row.img2"></el-image>
        </template>
      </el-table-column>>
      <el-table-column label="商品图片3" align="center" width="200px">
        <template #default="scope">
          <el-image :src="scope.row.img3"></el-image>
        </template>
      </el-table-column>>
      <el-table-column label="商品图片4" align="center" width="200px">
        <template #default="scope">
          <el-image :src="scope.row.img4"></el-image>
        </template>
      </el-table-column>>

    </el-table>

    <!-- ------------------做分页显示用的------------------------ -->
    <el-pagination background layout="prev, pager, next" :total="proList.length" v-model:current-page="currentPage" />
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 100;
  left: 0;
}
.el-image {
  width: 80px;
}
</style>